import React, { Component, createRef } from 'react'

export default class Form extends Component {
  state = {
    inputComment: '',
  }
  //创建ref
  inputRef = createRef()
  handleChange = (e) => {
    this.setState({
      inputComment: e.target.value,
    })
  }
  publishComment = () => {
    if (!this.state.inputComment.trim()) {
      this.inputRef.current.focus()
      return alert('评论内容不能为空')
    }
    this.props.publishComment(this.state.inputComment)

    this.setState({
      inputComment: '',
    })
  }

  render() {
    return (
      <div className="comment-send">
        <div className="user-face">
          <img
            className="user-head"
            src="http://geek.itheima.net/images/user_head.jpg"
            alt=""
          />
        </div>
        <div className="textarea-container">
          <textarea
            cols="80"
            rows="5"
            placeholder="发条友善的评论"
            className="ipt-txt"
            value={this.state.inputComment}
            onChange={this.handleChange}
            ref={this.inputRef}
          />
          <button onClick={this.publishComment} className="comment-submit">
            发表评论
          </button>
        </div>
        <div className="comment-emoji">
          <i className="face"></i>
          <span className="text">表情</span>
        </div>
      </div>
    )
  }
}
